<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button style="float: right" type="primary" @click="handleSearchList()" size="small">
          查询搜索
        </el-button>
        <el-button style="float: right; margin-right: 15px" @click="handleResetSearch()" size="small">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="输入搜索：">
            <el-input v-model="listQuery.name" class="input-width" placeholder="角色名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="listQuery.status" placeholder="请选择">
              <el-option label="启用" :value="0"></el-option>
              <el-option label="禁用" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button>
    </el-card>
    <div class="table-container">
      <el-table ref="roleTable" :data="list" style="width: 100%" v-loading="listLoading" height="500px">
        <el-table-column label=" " type="index" width="50"> </el-table-column>
        <el-table-column label="角色名称">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column label="角色编码">
          <template slot-scope="scope">{{ scope.row.code }}</template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-button :type="scope.row.status == 0 ? 'primary' : 'danger'" plain>{{ scope.row.status == 0 ? "启用" : "禁用"
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">{{ scope.row.remarks }}</template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">{{ scope.row.createTime }}</template>
        </el-table-column>
        <el-table-column label="更新时间">
          <template slot-scope="scope">{{ scope.row.updateTime }}</template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-row>
              <el-button size="mini" type="text" @click="handleSelectResource(scope.$index, scope.row)">分配资源
              </el-button>
              <el-button size="mini" type="text" @click="handleUpdate(scope.$index, scope.row)">
                编辑
              </el-button>
              <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.page" :page-size="listQuery.size"
        :page-sizes="[10, 20, 30]" :total="total">
      </el-pagination>
    </div>
    <el-dialog :title="isEdit ? '编辑角色' : '添加角色'" :visible.sync="dialogVisible" width="40%">
      <el-form :model="role" ref="roleForm" label-width="150px" size="small" :rules="rules">
        <el-form-item label="角色名称：" prop="name">
          <el-input v-model="role.name" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="角色编码：" prop="code">
          <el-input v-model="role.code" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="描述：">
          <el-input v-model="role.remarks" type="textarea" :rows="5" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="是否启用：">
          <el-radio-group v-model="role.status">
            <el-radio :label="1">否</el-radio>
            <el-radio :label="0">是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="分配资源" :visible.sync="dialogVisible1" width="600px">
      <div style="height: 500px;overflow-y: auto;">
        <el-tree :data="data" show-checkbox node-key="id" :default-checked-keys="checkedKeys" :props="defaultProps"
          :default-expand-all="true" @current-change="currentChange" :check-on-click-node="true">
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  addRoleInfo,
  getRoleList,
  updateRoleInfo,
  deleteRoleInfo,
  getMenuTree,
} from "@/api/role";

const defaultListQuery = {
  page: 1,
  size: 10,
  name: null,
  status: null,
};
const defaultRole = {
  id: null,
  name: null,
  code: null,
  remarks: "",
  status: 1,
};
export default {
  name: "roleList",
  data() {
    return {
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      total: null,
      listLoading: false,
      dialogVisible: false,
      role: Object.assign({}, defaultRole),
      isEdit: false,
      rules: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        code: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      dialogVisible1: false,
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      checkedKeys: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 树节点被选中
    currentChange(data, i) {
      console.log(data, i);
    },
    // 点击分配资源
    handleSelectResource(index, row) {
      this.dialogVisible1 = true;
      getMenuTree({ id: row.id }).then((response) => {
        if (response.code == 200) {
          this.data = response.data.list;
          this.checkedKeys = response.data.ids
        }
      });
    },
    // 搜索重置
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery);
      this.getList();
    },
    // 搜索
    handleSearchList() {
      this.listQuery.page = 1;
      this.getList();
    },
    // 分页
    handleSizeChange(val) {
      this.listQuery.page = 1;
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    // 新增按钮
    handleAdd() {
      this.dialogVisible = true;
      this.isEdit = false;
      this.role = Object.assign({}, defaultRole);
    },
    // 删除
    handleDelete(index, row) {
      this.$confirm("是否要删除该角色?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteRoleInfo({ id: row.id }).then((response) => {
          if (response.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList();
          }
        });
      });
    },
    // 修改
    handleUpdate(index, row) {
      this.dialogVisible = true;
      this.isEdit = true;
      this.role = Object.assign({}, row);
    },
    // 新增修改确认按钮
    handleDialogConfirm() {
      this.$refs.roleForm.validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            let par = {
              id: this.role.id,
              name: this.role.name,
              code: this.role.code,
              remarks: this.role.remarks,
              status: this.role.status,
              loginId: JSON.parse(localStorage.getItem("userInfo")).id,
            };
            updateRoleInfo(par).then((response) => {
              if (response.code === 200) {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.dialogVisible = false;
                this.getList();
              }
            });
          } else {
            let par = {
              name: this.role.name,
              code: this.role.code,
              remarks: this.role.remarks,
              status: this.role.status,
              loginId: JSON.parse(localStorage.getItem("userInfo")).id,
            };
            addRoleInfo(par).then((response) => {
              if (response.code === 200) {
                this.$message({
                  type: "success",
                  message: "添加成功!",
                });
                this.dialogVisible = false;
                this.getList();
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    // 获取角色列表
    getList() {
      this.listLoading = true;
      getRoleList(this.listQuery).then((response) => {
        if (response.code == 200) {
          this.listLoading = false;
          this.list = response.data.list;
          this.total = response.data.total;
        }
      });
    },
  },
};
</script>
<style></style>
